iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 22
9
Modern Web

金魚都能懂的CSS必學屬性系列 第 22

Background - 金魚都能懂的CSS必學屬性

  • 分享至 

  • xImage
  •  

background 如字面所示,主要用途是設定網頁中元素的背景,實際上 background 是一個CSS 縮寫,它的值是由多個 CSS 屬性所組成,原始碼撰寫方式如下

background: gray url("amos.png") scroll no-repeat 50% 50% / 50% 50%;

我們可以看到多個值串起來有點驚人啊!目前完整的寫完可以高達 8 個值, 這時候就需要特別注意到值的順序問題了,一但寫錯就可能整段都失效,請各位新手與開發者千萬要注意再注意!

background 的順序

由前面我們可以看到一個背景屬性有非常多的不同項目可以設定,以金魚必學的 CSS 屬性來說,Amos 簡單條列於下

  • background-color
  • background-image
  • background-attachment
  • background-repeat
  • background-poition
  • background-size

奇怪了!前面明明提到 background 最多到 8 個值,但為何屬性卻只有 6 個呢?主要是其中兩個屬性分別可以設定兩個值,加起來就變成驚人的 8 個值了。

了解了是哪幾個 background 的屬性之後,我們就可以把 background 簡寫的值順序抓出來了,background 值的順序如下

background: color image attachment repeat poition / size

這邊請注意到最後面的那條斜線,該斜線是很重要的,為何要有斜線?主要是要區隔 background-positionbackground-size ,由於這兩個屬性的值中,除了關鍵字以外也可以使用數值單位,那麼就可能會出現下面這樣的原始碼

background: gray url("amos.png") scroll no-repeat 50% 50% / 50% 50%;

是不是看的很暈? 4 個 50% 分別是甚麼東西啊?有了斜線之後,斜線左側的會被視為 background-position ,右側則會被視為 background-size ,是不是變的單純的多了。這樣的話我們也可以使用關鍵字來設定,像是下面這樣

background: gray url("amos.png") scroll no-repeat center center / 50% 50%;

從之前所寫的「Background-position- 金魚都能懂的CSS必學屬性」可以得知 background-position 可以僅設定一個值,另一個會自動預設 center 來看,我們也可以把原始碼更節省的改成下面這樣

background: gray url("amos.png") scroll no-repeat center / 50% 50%;

是不是變的簡略多了,少打幾個字我就能提早下班了,好屬性不學多麼可惜啊!

background 有哪些值可以忽略

由於瀏覽器本身都會有 CSS 的預設值,所以當我們不設定明確的 background 相關值時,background 會值接採用瀏覽器預設的值(真正的原理其實是 CSS 優先權問題),所以其實每一個值都可以選擇寫或不寫,很彈性對吧!但 background 撰寫時需要特別注意的則是「 background-position / background-size」這「一組」值,會說它是「一組」的原因很明顯,因為他們在有條件下是必須要一起在斜線的左右出現的。

background-position / background-size」在僅有 background-position 時,可以不需要出現斜線,background-size 出現時,必定要與 background-position 與斜線同時撰寫,否則你的原始碼會失效,讓我們來看看下方正常以及會失效的寫法。

可正常執行的寫法

background: url("amos.png") no-repeat center

background: url("amos.png") no-repeat center / 50% 50%;

background: url("amos.png") no-repeat center / cover;

會失效的寫法

background: url("amos.png") no-repeat / 50% 50%;

background: url("amos.png") no-repeat / cover;

background: url("amos.png") no-repeat center cover;

以上有興趣的朋友都可以實際的撰寫試玩看看(是要玩甚麼啦XD)

background 撰寫時要注意

background 由於是 CSS 簡寫屬性,所以我們可能不小心會出現以下寫法!

background: red url("amos.png") center center;
background-color: black;

上面這樣的寫法是有可能出現在實際專案中的,一部分有可能是因為開發者的粗心大意,但有時候卻可能是刻意為之,先來了解這樣的寫法會出現的結果是甚麼?由於 CSS 優先權的問題所致,所以這兩行 CSS background 設定的結果會是「黑色底 + Amos 的相片置中於該容器中」。也就是說第 1 行的 red 被第 2 行的 black 覆寫了,由於 background-image 、 background-position 的屬性沒有被覆寫,所以依舊會套用上去。

那麼會刻意使用這樣的寫法是甚麼情況呢?假設我們在一個頁面中有一個基本的區塊背景設定,但每個區塊的背景色彩會不一樣,背景圖片也不一樣,那麼我們就可以採用以下方式來省下一些重複的原始碼,先看看我們尚未套用簡寫的的原始碼可能會長怎樣

HTML

<div class="amos">...略</div>
<div class="gold">...略</div>
<div class="fish">...略</div>
<div class="teaching">...略</div>

CSS

.amos{
	background-color: #faa;
	background-image: url("amos.png");
	background-repeat: no-repeat;
	background-position: center;
	background-size: 50% auto;
}
.gold{
	background-color: #ffa;
	background-image: url("gold.png");
	background-repeat: no-repeat;
	background-position: center;
	background-size: 50% auto;
}
.fish{
	background-color: #fa0;
	background-image: url("fish.png");
	background-repeat: no-repeat;
	background-position: center;
	background-size: 50% auto;
}
.teaching{
	background-color: #666;
	background-image: url("teaching.png");
	background-repeat: no-repeat;
	background-position: center;
	background-size: 50% auto;
}

是不是有些驚人的恐怖!當然!如果你公司始採用原始碼行數來決定你的績效的話,這段原始碼絕對可以讓你獲得不錯的成績(喂!別亂教人啊)。這樣的 CSS 原始碼對於有經驗的開發者,通常我們可以把相同的設定取出來,並使用「CSS 群組式宣告 - 每個開發者都該學會的選取方式」改寫成下面這樣

.amos,
.gold,
.fish,
.teaching{
	background-repeat: no-repeat;
	background-position: center;
	background-size: 50% auto;
}
.amos{
	background-color: #faa;
	background-image: url("amos.png");
}
.gold{
	background-color: #ffa;
	background-image: url("gold.png");
}
.fish{
	background-color: #fa0;
	background-image: url("fish.png");
}
.teaching{
	background-color: #666;
	background-image: url("teaching.png");
}

但這樣的寫法好像還是有改進的空間,所以其實我們可以利用縮寫方式來改寫成下面這樣

.amos,
.gold,
.fish,
.teaching{
	background: no-repeat center / 50% auto;
}
.amos{
	background-color: #faa;
	background-image: url("amos.png");
}
.gold{
	background-color: #ffa;
	background-image: url("gold.png");
}
.fish{
	background-color: #fa0;
	background-image: url("fish.png");
}
.teaching{
	background-color: #666;
	background-image: url("teaching.png");
}

是不是利用一行縮寫就能讓我們大幅的減少冗長的背景設定呢?且原始碼的閱讀也不受影響,可謂是超級方便的啦!寫道這相信大家也都手癢了吧,不多說,快去試著寫看看還有哪些變化應用吧!「金魚都能懂的CSS必學屬性」,下篇見啦!


「金魚都能懂的CSS選取器」已集結成書,並於書中添加一些新篇章及細節補充,有興趣的朋友可至天瓏書局選購,感謝各位支持
購書連結 https://www.tenlong.com.tw/products/9789864344994?list_name=b-r30-zh_tw
https://ithelp.ithome.com.tw/upload/images/20200917/20112550bxAFk2frMp.jpg
讓我們好好善用CSS選取器吧


金魚都能懂的教學系列

鐵人雙主題挑戰中,歡迎訂閱一波

金魚都能懂的Bootstrap5網頁框架開發

立刻訂閱 CSS可樂的網站/頻道享受精彩文章

Line搜尋「@CSScoke」加入CSS可樂公開帳號,可以收到 Amos 第一手資訊喔
CSS 可樂部落格
CSS coke 的 Youtube 直播頻道
快按此訂閱 CSS coke 的頻道接收最新教學
/images/emoticon/emoticon12.gif


上一篇
Background-attchment- 金魚都能懂的CSS必學屬性
下一篇
Border & outline- 金魚都能懂的CSS必學屬性
系列文
金魚都能懂的CSS必學屬性31
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

1 則留言

0
scbd103116
iT邦新手 5 級 ‧ 2020-10-20 17:02:56

錯字的部分 -> "齊"中兩個屬性

CSScoke iT邦新手 3 級 ‧ 2020-10-26 21:21:43 檢舉

感謝! 已更正^^

我要留言

立即登入留言